<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<!--肌肉九宫格-->
<div id="app">
    <div id="jr-9">
        <span style="font-size: 30px">肌肉分类</span>
        <!--图片九宫格-->
        <div id="jr-box">
            <img src="picture/jr-jingbu.png" alt="">
            <span id="jr-jingbu">颈部</span>
            <img src="picture/jr-jianbu.png" alt="">
            <span id="jr-jianbu">肩部</span>
            <img src="picture/jr-xiongbu.png" alt="">
            <span id="jr-xiongbu">胸部</span>
            <img src="picture/jr-bibu.png" alt="">
            <span id="jr-bibu">臂部</span>
            <img src="picture/jr-beibu.png" alt="">
            <span id="jr-beibu">背部</span>
            <img src="picture/jr-fubu.png" alt="">
            <span id="jr-fubu">腹部</span>
            <img src="picture/jr-yaobu.png" alt="">
            <span id="jr-yaobu">腰部</span>
            <img src="picture/jr-tunbu.png" alt="">
            <span id="jr-tunbu">臀部</span>
            <img src="picture/jr-tuibu.png" alt="">
            <span id="jr-tuibu">腿部</span>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {}
    })
</script>
<style>
    #jr-9{
        padding-top: 13px;
        padding-left: 10px;
        border:solid;
        border-width: 3px 0 0 0;
        border-color: red;
        background: #eaeaea;
        width: 320px;
        height: 400px;
    }
    #jr-box {
        width: 310px;
        height: 310px;
        margin: 20px 0px 0px 0px;
        display: flex;
        flex-direction: row;
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: rgb(228, 226, 226);
    }

    #jr-box > img {
        width: 100px;
        height: 100px;
        object-fit: cover;
    }

    #jr-box:after {
        content: '';
        display: block;
        width: 100px;
    }
    #jr-box>span{
        font-size: 28px;
        color: white;
        position:absolute;
    }
    #jr-jingbu{
        top:30px;
        left:20px;
    }
    #jr-jianbu{
        top:30px;
        left:130px;
    }
    #jr-xiongbu{
        top:30px;
        left:230px;
    }
    #jr-bibu{
        top:130px;
        left:20px;
    }
    #jr-beibu{
        top:130px;
        left:130px;
    }
    #jr-fubu{
        top:130px;
        left:230px;
    }
    #jr-yaobu{
        top:230px;
        left:20px;
    }
    #jr-tunbu{
        top:230px;
        left:130px;
    }
    #jr-tuibu{
        top:230px;
        left:230px;
    }
</style>
</html>